<script>
  init({
    title: 'Classes',
    desc: 'Use <code>classes, classPrefix, size</code> to define the class and size of select.',
    links: ['multiple-select.min.css', 'themes/bootstrap.min.css'],
    scripts: ['multiple-select.min.js']
  })
</script>

<style>
  select {
    width: 100%;
  }
  .input.input-sm .ms-choice {
    height: 20px;
  }
  .input.input-lg .ms-choice {
    height: 35px;
  }
</style>

<div>
  <div class="mb-3 row">
    <label class="col-sm-2">
      Small Select
    </label>

    <div class="col-sm-10">
      <select multiple="multiple" data-size="sm">
        <option value="1">January</option>
        <option value="2">February</option>
        <option value="3">March</option>
        <option value="4">April</option>
        <option value="5">May</option>
        <option value="6">June</option>
        <option value="7">July</option>
        <option value="8">August</option>
        <option value="9">September</option>
        <option value="10">October</option>
        <option value="11">November</option>
        <option value="12">December</option>
      </select>
    </div>
  </div>

  <div class="mb-3 row">
    <label class="col-sm-2">
      Normal Select
    </label>

    <div class="col-sm-10">
      <select multiple="multiple">
        <option value="1">January</option>
        <option value="2">February</option>
        <option value="3">March</option>
        <option value="4">April</option>
        <option value="5">May</option>
        <option value="6">June</option>
        <option value="7">July</option>
        <option value="8">August</option>
        <option value="9">September</option>
        <option value="10">October</option>
        <option value="11">November</option>
        <option value="12">December</option>
      </select>
    </div>
  </div>

  <div class="mb-3 row">
    <label class="col-sm-2">
      Large Select
    </label>

    <div class="col-sm-10">
      <select multiple="multiple" data-size="lg">
        <option value="1">January</option>
        <option value="2">February</option>
        <option value="3">March</option>
        <option value="4">April</option>
        <option value="5">May</option>
        <option value="6">June</option>
        <option value="7">July</option>
        <option value="8">August</option>
        <option value="9">September</option>
        <option value="10">October</option>
        <option value="11">November</option>
        <option value="12">December</option>
      </select>
    </div>
  </div>
</div>

<script>
  function mounted() {
    $('select').multipleSelect({
      classes: 'input',
      classPrefix: 'input',
    })
  }
</script>
